import React from 'react';
import { Card, Typography, Alert, Statistic, Row, Col } from 'antd';
import { ArrowDownOutlined } from '@ant-design/icons';
import './darkTheme.css';

const { Title, Paragraph, Text } = Typography;

const StateWave: React.FC = () => {
  // 自定义卡片样式
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="回撤控制原则" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
        className="dark-theme-card"
      >
        <Alert
          message="风险提示"
          description="有效的回撤控制是长期稳定盈利的关键。单笔交易亏损控制在总资金的2%以内，最大回撤控制在20%以内。"
          type="warning"
          style={{ marginBottom: '20px', backgroundColor: '#172a45', borderColor: '#233554', color: '#ccd6f6' }}
        />
        
        <Row gutter={16} style={{ marginBottom: '20px' }}>
          <Col span={8}>
            <Statistic
              title={<span style={{ color: '#8892b0' }}>单笔最大亏损</span>}
              value={2}
              precision={0}
              valueStyle={{ color: '#ff4d4f' }}
              suffix="%"
              prefix={<ArrowDownOutlined />}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title={<span style={{ color: '#8892b0' }}>单日最大回撤</span>}
              value={5}
              precision={0}
              valueStyle={{ color: '#ff4d4f' }}
              suffix="%"
              prefix={<ArrowDownOutlined />}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title={<span style={{ color: '#8892b0' }}>总体最大回撤</span>}
              value={20}
              precision={0}
              valueStyle={{ color: '#ff4d4f' }}
              suffix="%"
              prefix={<ArrowDownOutlined />}
            />
          </Col>
        </Row>
        
        <Typography style={{ color: '#ccd6f6' }}>
          <Title level={4} style={{ color: '#ccd6f6' }}>止损策略</Title>
          <Paragraph>
            <ul>
              <li>固定百分比止损：单笔交易亏损不超过持仓市值的7%</li>
              <li>技术指标止损：价格跌破关键支撑位或均线系统时止损</li>
              <li>时间止损：持仓超过预定时间未达预期目标则止损</li>
              <li>波动止损：市场波动超出正常范围时提前止损</li>
            </ul>
          </Paragraph>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>风险控制措施</Title>
          <Paragraph>
            <ul>
              <li>分散投资：不同行业、不同板块适当分散</li>
              <li>对冲策略：必要时使用对冲工具降低系统性风险</li>
              <li>资金管理：根据市场环境调整仓位，控制整体风险敞口</li>
              <li>定期评估：每周评估投资组合风险，及时调整策略</li>
              <li>预警机制：设置关键价格预警，提前做好风险应对</li>
            </ul>
          </Paragraph>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>心理控制</Title>
          <Paragraph>
            <ul>
              <li>严格执行交易计划，不因情绪波动改变策略</li>
              <li>接受小亏损，避免酿成大亏损</li>
              <li>保持交易日志，复盘分析每次回撤原因</li>
              <li>设定合理预期，避免过度交易</li>
            </ul>
          </Paragraph>
        </Typography>
      </Card>
    </div>
  );
};

export default StateWave;